<template>
  <div class="container">
    <!--筛选表单-->
    <div class="tag-form">
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.username" placeholder="请输入管理员姓名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.email" placeholder="请输入管理员邮箱" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.sex" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label="冻结" :value="0" />
            <el-option label="启用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain size="small" @click="openDialog">创建用户</el-button>
    </div>
    <!--表单区域-->
    <div class="table-box">
      <el-table :data="userList" border stripe>
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="id" label="管理员ID" />
        <el-table-column prop="username" label="管理员姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="管理员邮箱" />
        <el-table-column prop="avatar" label="管理员头像">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :src="baseSrc+scope.row.avatar" alt="" class="userImg">
            <img v-else :src="urlImg" alt="" class="userImg">
          </template>
        </el-table-column>
        <el-table-column label="管理员角色">
          <template slot-scope="{row}">
            <el-tag>{{ row.role_name_str }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="添加时间" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="{row}">
            <el-switch
              v-model="row.status"
              inactive-text="冻结"
              active-text="启用"
              :active-value="1"
              :inactive-value="2"
              @change="switchChange(row.status,row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button size="small" type="primary" icon="el-icon-edit" circle @click="$refs.editForm.edituserList(row.id)" /> &nbsp;&nbsp;&nbsp;

            <el-popconfirm title="确定删除吗" @onConfirm="deluserList(row.id)">
              <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--分页区域-->
    <el-row class="page" align="middle" type="flex" justify="end">
      <!-- 三个变量（页码，总数，每页数），两个事件（每页数量切换 ，页码切换） -->
      <el-pagination
        :current-page.sync="query.page"
        :page-sizes="[ 6, 8, 10]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        :pager-count="7">
      </el-pagination>
    </el-row>
    <!-- 弹窗 -->
    <UserPermission ref="editForm" @updateList="getUserList" />
  </div>
</template>

<script>
import { getUserListApi, delUserApi, changeUserStatus } from '@/api/permission/user'
import UserPermission from './components/userPermission.vue'
export default {
  components: {
    UserPermission
  },
  data() {
    return {
      userList: [],
      baseSrc: 'http://124.223.14.236:7005/',
      urlImg: 'http://124.223.14.236:7005/dist/static/img/bigUserHeader.fda3837f.png',
      query: {
        username: '',
        email: '',
        status: '',
        page: 1,
        limit: 10
      },
      total: 0,
      isShow: false
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 筛选表单
    onSearch() {
      this.query.page = 1
      this.getUserList()
    },
    // 重置筛选
    // 重置所有筛选条件，并且在发送一次数据请求
    onReset() {
      this.query.page = 1
      this.query = {
        username: '',
        email: '',
        status: '',
        page: 1,
        limit: 10
      }
      this.getUserList()
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.query.limit = val
      this.getUserList()
    },
    // 页码切换事件
    currentChange(val) {
      this.query.page = val
      this.getUserList()
    },
    // 获取列表数据
    async getUserList() {
      const res = await getUserListApi(this.query)
      console.log(res)
      this.userList = res.list
      this.total = res.total
    },
    // 创建用户弹窗
    openDialog() {
      this.$refs.editForm.isShow = true
    },
    // 删除数据
    async deluserList(id) {
      await delUserApi(id)
      this.$message.success('删除成功')
      this.getUserList()
    },
    // 开发变换触发更新
    async switchChange(val, id) {
      this.userList.status = val
      this.userList.id = id
      await changeUserStatus(this.userList)
      this.$message.success('修改状态成功')
    }
  }
}
</script>

<style>
.userImg{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.tag-form{
  display: flex;
  justify-content: space-between;
}
</style>
